//* 绑定 切换轻量渲染面板 按钮点击事件
simpleRenderingButton.addEventListener('click',
	function () {
		// 若当前屏幕宽度不足，显示错误提示并结束事件响应
		if (window.innerWidth <= SMALL_SCREEN_WIDTH_THRESHOLD) return showSystemMessage("< 轻量渲染 >不可在小屏幕下使用", "error");
		// 清除所有配置面板的显示状态
		eraseAllConfigurePanel();
		// 若当前已显示轻量渲染面板
		if (configurePanelOption === 'simpleRenderingButton') {
			// 显示对话和历史记录面板
			chatHistoryContainerPanel.style.display = "flex";
			// 隐藏轻量渲染面板
			simpleRenderingContainerPanel.style.display = "none";
			// 改变全局变量，表示无配置面板显示
			configurePanelOption = false;
			// 结束事件响应
			return;
		}
		// 隐藏对话和历史记录面板
		chatHistoryContainerPanel.style.display = "none";
		// 显示轻量渲染面板
		simpleRenderingContainerPanel.style.display = "flex";
		// 改变全局变量，表示当前显示轻量渲染面板
		configurePanelOption = 'simpleRenderingButton';
	}
);
//* 绑定 切换简单视觉面板 按钮点击事件
simpleVisualButton.addEventListener('click',
	function () {
		// 若当前屏幕宽度不足，显示错误提示并结束事件响应
		if (window.innerWidth <= SMALL_SCREEN_WIDTH_THRESHOLD) return showSystemMessage("< 轻量视觉 >不可在小屏幕下使用", "error");
		// 清除所有配置面板的显示状态
		eraseAllConfigurePanel();
		// 若当前已显示轻量渲染面板
		if (configurePanelOption === 'simpleVisualButton') {
			// 显示对话和历史记录面板
			chatHistoryContainerPanel.style.display = "flex";
			// 隐藏简单视觉面板
			simpleVisualContainerPanel.style.display = "none";
			// 改变全局变量，表示无配置面板显示
			configurePanelOption = false;
			// 结束事件响应
			return;
		}
		// 隐藏对话和历史记录面板
		chatHistoryContainerPanel.style.display = "none";
		// 显示简单视觉面板
		simpleVisualContainerPanel.style.display = "flex";
		// 改变全局变量，表示当前显示简单视觉面板
		configurePanelOption = 'simpleVisualButton';
	}
);
//* 绑定 切换轻量知识面板 按钮点击事件
simpleKnowledgeButton.addEventListener('click',
	function () {
		// 若当前屏幕宽度不足，显示错误提示并结束事件响应
		if (window.innerWidth <= SMALL_SCREEN_WIDTH_THRESHOLD) return showSystemMessage("< 轻量知识 >不可在小屏幕下使用", "error");
		// 清除所有配置面板的显示状态
		eraseAllConfigurePanel();
		// 若当前已显示轻量知识面板
		if (configurePanelOption === 'simpleKnowledgeButton') {
			// 显示对话和历史记录面板
			chatHistoryContainerPanel.style.display = "flex";
			// 隐藏轻量知识面板
			simpleKnowledgeContainerPanel.style.display = "none";
			// 改变全局变量，表示无配置面板显示
			configurePanelOption = false;
			// 结束事件响应
			return;
		}
		// 隐藏对话和历史记录面板
		chatHistoryContainerPanel.style.display = "none";
		// 显示轻量知识面板
		simpleKnowledgeContainerPanel.style.display = "flex";
		// 改变全局变量，表示当前显示轻量知识面板
		configurePanelOption = 'simpleKnowledgeButton';
	}
);
//* 绑定 切换模型配置 按钮点击事件
modelConfigureButton.addEventListener('click',
	function () {
		// 若当前屏幕宽度不足
		if (window.innerWidth <= SMALL_SCREEN_WIDTH_THRESHOLD) return showSystemMessage("< 模型配置 >不可在小屏幕下使用", "error");
		// 清除所有配置面板的显示状态
		eraseAllConfigurePanel();
		// 若当前未显示系统配置
		if (configurePanelOption === 'modelConfigureButton') {
			// 显示对话和历史记录面板
			chatHistoryContainerPanel.style.display = "flex";
			// 改变全局变量
			configurePanelOption = false;
			// 结束事件响应
			return;
		}
		// 隐藏对话和历史记录面板
		chatHistoryContainerPanel.style.display = "none";
		// 显示模型配置面板
		modelConfigContainerPanel.style.display = "flex";
		// 改变全局变量
		configurePanelOption = 'modelConfigureButton';
	}
);
//* 绑定 切换语音配置 按钮点击事件
voiceConfigureButton.addEventListener('click',
	function () {
		// 若当前屏幕宽度不足
		if (window.innerWidth <= SMALL_SCREEN_WIDTH_THRESHOLD) return showSystemMessage("< 语音配置 >不可在小屏幕下使用", "error");
		// 清除所有配置面板的显示状态
		eraseAllConfigurePanel();
		// 若当前未显示系统配置
		if (configurePanelOption === 'voiceConfigureButton') {
			// 显示对话和历史记录面板
			chatHistoryContainerPanel.style.display = "flex";
			// 改变全局变量
			configurePanelOption = false;
			// 结束事件响应
			return;
		}
		// 隐藏对话和历史记录面板
		chatHistoryContainerPanel.style.display = "none";
		// 显示模型配置面板
		speechConfigContainerPanel.style.display = "flex";
		// 改变全局变量
		configurePanelOption = 'voiceConfigureButton';
	}
);
//* 绑定 功能控制面板 按钮点击事件
functionControlButton.addEventListener('click',
	function () {
		// 若当前屏幕宽度不足，显示错误提示并结束事件响应
		if (window.innerWidth <= SMALL_SCREEN_WIDTH_THRESHOLD) return showSystemMessage("< 功能控制 >不可在小屏幕下使用", "error");
		// 清除所有配置面板的显示状态
		eraseAllConfigurePanel();
		// 若当前已显示功能控制面板
		if (configurePanelOption === 'functionControlButton') {
			// 变更按钮图标，使用扳手图标表示功能控制关闭状态
			this.innerHTML = '<i class="fas fa-cog"></i>';
			// 显示对话和历史记录面板
			chatHistoryContainerPanel.style.display = "flex";
			// 隐藏功能控制面板
			functionControlContainerPanel.style.display = "none";
			// 隐藏聊天记录按钮
			chatHistoryButton.style.display = "none";
			// 改变全局变量，表示无配置面板显示
			configurePanelOption = false;
			// 结束事件响应
			return;
		}
		// 变更按钮图标，使用齿轮组图标表示功能控制打开状态
		this.innerHTML = '<i class="fas fa-wrench"></i>';
		// 隐藏对话和历史记录面板
		chatHistoryContainerPanel.style.display = "none";
		// 显示聊天记录按钮
		chatHistoryButton.style.display = "flex";
		// 变更聊天记录按钮透明度，使其可见
		chatHistoryButton.style.opacity = "0.8";
		// 显示功能控制面板
		functionControlContainerPanel.style.display = "flex";
		// 变更按钮样式, 添加点击中的样式类
		this.classList.add("clicking");
		// 改变全局变量，表示当前显示功能控制面板
		configurePanelOption = 'functionControlButton';
	}
);
//* 绑定 聊天记录面板 按钮点击事件
chatHistoryButton.addEventListener('click',
	function () {
		// 若当前屏幕宽度不足，显示错误提示并结束事件响应
		if (window.innerWidth <= SMALL_SCREEN_WIDTH_THRESHOLD) return showSystemMessage("< 聊天记录 >不可在小屏幕下使用", "error");
		// 清除所有配置面板的显示状态
		eraseAllConfigurePanel();
		// 显示对话和历史记录面板
		chatHistoryContainerPanel.style.display = "flex";
		// 隐藏功能控制面板
		functionControlContainerPanel.style.display = "none";
		// 改变全局变量，表示无配置面板显示
		configurePanelOption = false;
		// 隐藏聊天记录按钮
		chatHistoryButton.style.display = "none";
	}
);
//* 绑定 自动播放 按钮点击事件
autoPlaySpeechButton.addEventListener('click',
	function () {
		if (autoPlaySpeech) {
			// 变更按钮样式
			this.innerHTML = '<i class="fas fa-volume-off"></i> 启用自动朗读';
			this.classList.add("disable");
			// 改变全局变量
			autoPlaySpeech = false;
			showSystemMessage("禁用< 消息自动朗读 >", "success");

		}
		else {
			// 变更按钮样式
			this.innerHTML = '<i class="fas fa-volume-up"></i> 禁用自动朗读';
			this.classList.remove("disable");
			// 改变全局变量
			autoPlaySpeech = true;
			showSystemMessage("启用< 消息自动朗读 >", "success");

		};
		// 重载Live2D容器
		reloadLive2DContainer();
	}
);
//* 绑定 禁用语音识别自动发送 按钮点击事件
voiceRecognitionButton.addEventListener('click',
	function () {
		if (isDisableVoiceRecognition) {
			// 变更按钮样式
			this.innerHTML = '<i class="fas fa-microphone"></i> 禁用语音发送';
			this.classList.remove("disable");
			// 改变全局变量
			isDisableVoiceRecognition = false;
			showSystemMessage("启用< 语音识别并发送 >", "success");
		}
		else {
			// 变更按钮样式
			this.innerHTML = '<i class="fas fa-microphone-slash"></i> 启用语音发送';
			this.classList.add("disable");
			// 改变全局变量
			isDisableVoiceRecognition = true;
			showSystemMessage("禁用< 语音识别并发送 >", "success");
		};
		// 重载Live2D容器
		reloadLive2DContainer();
	}
);
//* 绑定 切换开发者模式 按钮点击事件
developerModeButton.addEventListener('click',
	function () {
		/**
		 * 获取文档中所有的配置面板按钮元素
		 */
		const configurePanelButton = document.documentElement.querySelectorAll('.power-button.live2d');
		// 遍历所有配置面板按钮，移除按钮上的点击中的样式类，恢复按钮初始样式
		configurePanelButton.forEach(button => button.classList.remove("clicking"));
		if (isDeveloperMode) {
			// 变更按钮样式
			this.innerHTML = '<i class="fas fa-star-and-crescent"></i>';
			this.classList.remove("clicking");
			// 改变全局变量
			isDeveloperMode = false;
			showSystemMessage("禁用< 开发者模式 >", "success");
		}
		else {
			// 变更按钮样式
			this.innerHTML = '<i class="fas fa-code"></i>';
			this.classList.add("clicking");
			// 改变全局变量
			isDeveloperMode = true;
			showSystemMessage("启用< 开发者模式 >", "success");
		};
		// 重载Live2D容器
		reloadLive2DContainer();
	}
);
//* 绑定 切换长期记忆模式 按钮点击事件
longTermMemoryButton.addEventListener('click',
	function () {
		/**
		 * 获取文档中所有的配置面板按钮元素
		 */
		const configurePanelButton = document.documentElement.querySelectorAll('.power-button.live2d');
		// 遍历所有配置面板按钮，移除按钮上的点击中的样式类，恢复按钮初始样式
		configurePanelButton.forEach(button => button.classList.remove("clicking"));
		if (isLongTermMemoryMode) {
			// 变更按钮样式
			this.innerHTML = '<i class="fas fa-memory"></i>';
			this.classList.remove("clicking");
			// 改变全局变量
			isLongTermMemoryMode = false;
			showSystemMessage("禁用< 长期记忆模式 >", "success");
		}
		else {
			// 变更按钮样式
			this.innerHTML = '<i class="fas fa-infinity"></i>';
			this.classList.add("clicking");
			// 改变全局变量
			isLongTermMemoryMode = true;
			showSystemMessage("启用< 长期记忆模式 >", "success");
		};
		// 重载Live2D容器
		reloadLive2DContainer();
	}
);
//* 绑定 切换主动消息模式 按钮点击事件
activeMessageButton.addEventListener('click',
	function () {
		/**
		 * 获取文档中所有的配置面板按钮元素
		 */
		const configurePanelButton = document.documentElement.querySelectorAll('.power-button.live2d');
		// 遍历所有配置面板按钮，移除按钮上的点击中的样式类，恢复按钮初始样式
		configurePanelButton.forEach(button => button.classList.remove("clicking"));
		if (isActiveMessageMode) {
			// 变更按钮样式，使用无消息图标表示主动消息模式禁用状态
			this.innerHTML = '<i class="fas fa-comment-slash"></i>';
			this.classList.remove("clicking");
			// 改变全局变量
			isActiveMessageMode = false;
			showSystemMessage("禁用< 主动消息模式 >", "success");
		}
		else {
			// 变更按钮样式，使用聊天图标表示主动消息模式启用状态
			this.innerHTML = '<i class="fas fa-comment-dots"></i>';
			this.classList.add("clicking");
			// 改变全局变量
			isActiveMessageMode = true;
			showSystemMessage("启用< 主动消息模式 >", "success");
		};
		// 重载Live2D容器
		reloadLive2DContainer();
	}
);
//* 绑定 切换主题风格 按钮点击事件
themeButton.addEventListener("click",
	function () {
		// 切换页面根元素(html)的暗色模式类名
		document.documentElement.classList.toggle("dark-mode");
		/**
		 * 获取当前是否为暗色模式
		 */
		const isDarkMode = document.documentElement.classList.contains("dark-mode");
		// 存储当前主题到本地存储中
		localStorage.setItem("theme", isDarkMode ? "dark" : "light");
		/**
		 * 获取文档中所有的配置面板按钮元素
		 */
		const configurePanelButton = document.documentElement.querySelectorAll('.power-button.live2d');
		// 遍历所有配置面板按钮，移除按钮上的点击中的样式类，恢复按钮初始样式
		configurePanelButton.forEach(button => button.classList.remove("clicking"));
		// 更新按钮图标
		if (isDarkMode) {
			// 变更按钮样式
			this.classList.add("clicking");
			this.innerHTML = '<i class="fas fa-sun"></i>';
		}
		else {
			// 变更按钮样式
			this.classList.remove("clicking");
			this.innerHTML = '<i class="fas fa-moon"></i>';
		};
	}
);
//* 绑定 二维码切换按钮 点击事件
qrcodeButton.addEventListener('click',
	function () {
		/**
		 * 获取图标元素
		 */
		const iconElement = this.querySelector('i');
		/**
		 * 获取文档中所有的配置面板按钮元素
		 */
		const configurePanelButton = document.documentElement.querySelectorAll('.power-button.live2d');
		// 遍历所有配置面板按钮，移除按钮上的点击中的样式类，恢复按钮初始样式
		configurePanelButton.forEach(button => button.classList.remove("clicking"));
		// 如果二维码已经显示，则关闭它
		if (qrcodeStatusPanel.className.includes('show')) {
			// 切换二维码显示区域的显示状态
			this.classList.remove('clicking');
			// 恢复二维码图标
			if (iconElement) iconElement.className = 'fa fa-qrcode';
			// 设置系统状态面板的类名，移除显示类名
			qrcodeStatusPanel.className = 'system-message qrcode';
		}
		else {
			// 切换二维码显示区域的显示状态
			this.classList.add('clicking');
			// 切换为关闭/条目图标
			if (iconElement) iconElement.className = 'fa fa-times';
			// 设置系统状态面板的类名，包含基础类名、消息类型类名和显示类名
			qrcodeStatusPanel.className = 'system-message qrcode show';
			// 拖动配置面板
			dragElement(qrcodeStatusPanel);
		}
	}
);